## 小程序

### 依赖

一些小组件
https://gitee.com/lbc19920615/aui-xcx-parts

### 动画考虑实现

借助wx.createAnimation 我发明了简便的写法
```
trx:100;$s;fun:ease-out;dur:10000;try:100;$s;trx:0;$s;
```

- trx: translateX
- try: translateY
- trz: translateZ
- fun: 设置本次动画option timingFunction
- dur: 设置被刺动画option duration
- delay: 设置被刺动画option delay
- $s: 执行动画

#### wx.createAnimation

#### css animation 

#### canvas animation


### 开发一个page的页面局部控制组件

如select tab refresh都是这样开发出来的

file: aui/app/index

```javascript
ret.Pagecomponent = class {
    constructor() {
        this.context = null;
    }
    bind(context) {
        this.context = context;
    }
    setData(path, value) {
        let data = {};
        data[path] = value;
        if (this.context && this.context.setData) {
            this.context.setData(data);
        }
    }
};

ret.PathPageComponent = class extends ret.Pagecomponent {
    constructor(path) {
        super();
        this.path = path;
    }
    setCurData(value) {
        let self = this;
        self.setData(self.path, value)
    }
};
```

例如refresh

```javascript
class auiRefresh extends PathPageComponent {
    constructor(path, initState = false, options) {
        super(path);
        this.setLoading(initState);
    }
    setLoading(value) {
        let self = this;
        self.setData(`${self.path}.loading`, value);
    }
}
```

### 如何定义一个page

file aui/app/page

pagepartcontrols 包含一些如tab  select refresh需要和页面共享变量的局部控制

```
definePage.define(function () {
    return define;
}, [pagepartcontrols])
```

### 标准化组件

#### select
file aui/pages/auiSelect

```xml
<a-select class="{{field.stateopen ? 'open' : ''}}">
    <aux-dropdown open="{{field.stateopen ? 'open' : ''}}"
        bind:onopen="field_onselectopen" bind:onclose="field_onselectclose">
        <a-select-toggle slot="toggle">select toggle</a-select-toggle>
        <a-select-content>select content</a-select-content>
    </aux-dropdown>
</a-select>
```

实例化组件
```javascript
let select = new auiSelect('field');
select.onBind = function (context) {
    let self = this;
    self.setOpen(false);
    context[self.path + '_onselectopen'] = function() {
        self.setOpen(true);
    };
    context[self.path + '_onselectclose'] = function() {
        self.setOpen(false);
    }
};
```

#### tab
主要用于静态化界面tab

```xml
<a-flexrow-center>
    <a-tab-toggle id="a" catch:tap="tab_toggle">toggle a</a-tab-toggle>
    <a-tab-toggle id="b" catch:tap="tab_toggle">toogle b</a-tab-toggle>
    <a-tab-toggle id="c" catch:tap="tab_toggle">toogle c</a-tab-toggle>
</a-flexrow-center>
<a-tab-content class="{{tab.currentId === 'a' ? 'open' : ''}}">a</a-tab-content>
<a-tab-content class="{{tab.currentId === 'b' ? 'open' : ''}}">b</a-tab-content>
<a-tab-content class="{{tab.currentId === 'c' ? 'open' : ''}}">c</a-tab-content>
```

实例化组件
```javascript
let tab = new auiTab('tab');
tab.onBind = function (context) {
    let self = this;
    self.setCurrentId('a');
    context.tab_toggle = function (e) {
        self.setCurrentId(e.target.id);
    }
};
```

#### refresh

显示或隐藏loading

```xml
<a-refresh class="{{ refresh.loading ? 'loading' : '' }} ">
    <a-refresh-loading>
        <!-- 放置loading图片 -->
        <a-flexrow-center class="horizontal-center">
            <a-loader class="circle" style="width: 32rpx; height: 32rpx"></a-loader>
        </a-flexrow-center>
    </a-refresh-loading>
    <a-refresh-content>
        content
    </a-refresh-content>
</a-refresh>
```

实例化组件
```javascript
let refresh = new auiRefresh('refresh');
```

#### swiper-tab

android ios 常见滑动tab

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [["onSelect", "当一个tab选中时触发回调", "", "", ""]]
}
</template></aup-table>


使用

```xml
<a-swiper-tab>
    <a-flexrow-center class="justified">
        <a-table-toggle data-tab-select="a" class="{{swipertab.activeId === 'a' ? 'active' : ''}}"
            catch:tap="swipertab_select"
        ><view class="u-rxp-h-10 u-rxp-v-10 u-text-center">tab nav a</view></a-table-toggle>
        <a-table-toggle data-tab-select="b" class="{{swipertab.activeId === 'b' ? 'active' : ''}}"
            catch:tap="swipertab_select"
        ><view class="u-rxp-h-10 u-rxp-v-10 u-text-center">tab nav b</view></a-table-toggle>
        <a-table-toggle data-tab-select="c" class="{{swipertab.activeId === 'c' ? 'active' : ''}}"
            catch:tap="swipertab_select"
        ><view class="u-rxp-h-10 u-rxp-v-10 u-text-center">tab nav c</view></a-table-toggle>
    </a-flexrow-center>
    <swiper
        style="height: 70vh"
      class="a-swiper-tabs"
      indicator-dots="{{swipertab.indicatorDots}}"
      autoplay="{{swipertab.autoplay}}"
      interval="{{swipertab.interval}}"
      duration="{{swipertab.duration}}"
      current="{{swipertab.currentindex}}"
      bindchange="swipertab_onSwiperChange">
      <block wx:for="{{swipertab.tabs}}">
        <swiper-item id="{{item.id}}">
            <view><aux-text>{{item.content}}</aux-text></view>
        </swiper-item>
      </block>
    </swiper>
</a-swiper-tab>
```

```javascript
let tabs = [
    {
        id: 'a',
        content: 'content a'
    },
    {
        id: 'b',
        content: 'content b',
    },
    {
        id: 'c',
        content: 'content c'
    }
];

let swipertab = new auiSwipertab('swipertab', tabs);
swipertab.onBind = function (context) {
    this.autoBind(context, 'a');
};

swipertab.onSelect = function (tab, index, tabs) {
    console.log(tab, index, tabs);
};
```

##### methods

setLoading

设置loading状态

```
refresh.setLoading(true);
```

#### scroll-view

```xml
<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view </button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>
```

### templates

#### icon with text
```xml
<template name="icon-with-text">
    <view class="aux-view u-layout-flex horizontal center {{comclassname}}">
        <a-icon class="{{iconname}}"></a-icon>
        <view class="aux-view"><aux-text>{{icontext}}</aux-text></view>
    </view>
</template>
```

### icon-input-group [no demo]

```xml
<template name="icon-input-group">
    <view class="aux-view u-layout-flex horizontal center {{comclassname}}">
        <a-icon class="{{iconname}}"></a-icon>
        <view class="aux-view">
            <aux-input
            class="{{input.disabled ? 'disabled': ''}}"
            cssapply="{{comclassname + '-input'}}"
            placeholder="{{input.placeholder ? input.placeholder : ''}}"
            value="{{input.value ? input.value : ''}}"
            disabled="{{input.disabled}}"></aux-input>
        </view>
    </view>
</template>
```

样式

```scss
%visual-icon-input-group-basic {
    background-color: #FFFFFF;
    padding: 5rpx 15rpx;
    @extend %visual-u-bdr-2;
    aux-input {
        color: #b9b9b9;
    }
}

// 小程序component重置css
@mixin icon-input-group-basic-component-reset($name) {
    .aux-input {
        &.#{$name} {
            border: none;
            @content;
        }
    }
}
```

### app.wxcs

#### icon
```scss
@font-face {
    font-family: "iconfont";
    src: url('https://at.alicdn.com/t/font_338429_y7w2j2g2ebuzncdi.ttf?t=1522584391825') format('truetype');
}

$icons: ( (".map-marker", "ea03"), (".chevron-right", "e77a"), (".message-text-outline", "ea29") );

a-icon {
    display: inline-block;
    font-family:"iconfont" !important;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @each $icon in $icons {
        &#{nth($icon, 1)} {
            &:before {
                content: "Symbol(GANG)" + nth($icon,2);
            }
        }
    }
}
```

#### global

```scss
body {
    font-family: 'PingFang SC', Helvetica, miui, Arial, tahoma, serif, sans-serif;
}
```

### gutter

简便的子元素gutter
```scss
@for $i from 1 through 32 {
    .a-gutter-row {
        &--#{$i} {
            > .a-gutter-item {
                margin-right: 5 ppx;
            }
        }
    }
}
```

#### 样式开发必写

dev.scss
```scss
$a-global-design: 535;

@for $i from 12 through 32 {
    %visual-u-rfz-#{$i} {
        font-size: #{$i * 750 / 320}rpx
    }
}

@function rpx($value) {
    @return #{$value * 750 / $a-global-design}rpx;
}
```

#### aui xcx

```scss
@import "~andy-aui-css/dev";
@import "~andy-aui-css/ui/core";
@import "~andy-aui-css/ui/font";
@import "~andy-aui-css/ui/text";
@import "~andy-aui-css/ui/list";
@import "~andy-aui-css/ui/layout";
@import "~andy-aui-css/ui/lineheight";
@import "~andy-aui-css/ui/overflow";
@import "~andy-aui-css/ui/position";
@import "~andy-aui-css/ui/shape";

.aux-view {
    line-height: 1;
}

@for $i from 12 through 32 {
    .u-rfz-#{$i} {
        font-size: #{$i * 750 / 320}rpx
    }
}

@mixin create-rgutter-class($value, $sel: "m", $type: "margin", $pos: (l,t,r,b), $ns: "u") {
    @each $a in $pos {
        .#{$ns}-#{$sel}-#{$a}-#{$value} {
            #{$type}-#{map-get($posalias, $a)}: #{$value * 750 / 320}rpx;
        }
    }
}

@for $i from 1 through 30 {
    @include create-rgutter-class($i, "rxm", "margin");
    @include create-gutter-extend($i, "rxm");

    @include create-rgutter-class($i, "rxp", "padding");
    @include create-gutter-extend($i, "rxp");
}
```

### page.wxss

```scss
a-page {
    display: block;
    [v-full] {
        height: 100vh;
    }
}
```

### page.wxs

```javascript
module.exports.isArray = function(value) {
    return value.constructor === "Array";
};
```

### page通用方法

#### toggleBoolean

```javascript
cdf.toggleBoolean = function (key) {
    var self = this;
    self.setData({
        [key]: !self.data[key]
    })
};
```

### 每次写

#### dev.scss

```scss
$a-global-c: (
    main: #ffca49
);

@each $ckey, $c in $a-global-c {
    %visual-a-bg-#{$ckey} {
        background-color: $c;
    }
}
```

#### page.scss

```scss
@each $ckey, $c in $a-global-c {
    .a-bg-#{$ckey} {
        background-color: $c;
    }
}
```

## 常见组件写法

### banners

```javascript
banners: {
    imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
}
```

界面元素
```xml
<view class="u-rxp-h-15 u-rxp-t-15">
    <swiper
      class="a-banner"
      indicator-dots="{{banners.indicatorDots}}"
      autoplay="{{banners.autoplay}}" interval="{{banners.interval}}" duration="{{banners.duration}}">
      <block wx:for="{{banners.imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>
</view>
```

TODO nth-child研究
参考
https://www.jianshu.com/p/db65ae0a3c2e

### menus

```javascript
menus: [
    {
        iconPath: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        name: "美食"
    },
    {
        iconPath: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        name: "美团超市"
    },
]
```

界面元素
```xml
<a-grid class="a-grid-row-item-4 a-menus">
    <block wx:for="{{menus}}" wx:for-item="menu">
    <a-grid-item class="a-menu-item">
        <a-flexcloumn-center>
            <aux-image class="u-rxp-b-7 a-menu-item__icon"
                image-class="a-menu-icon"
                src="{{menu.iconPath}}"></aux-image>
            <aux-text class="u-rfz-14">{{menu.name}}</aux-text>
        </a-flexcloumn-center>
    </a-grid-item>
    </block>
</a-grid>
```

## css 元素

### list

虚拟mixin
```scss
// core
%visual-u-list {
}

// extend
%visual-u-list--h {
    //overflow: auto;
    white-space: nowrap;
}

%visual-u-list--h .u-list-item {
    display: inline-block;
}

%visual-u-list--cross-top {
    > .u-list-item {
        vertical-align: top;
    }
}

%visual-u-list--cross-bottom {
    > .u-list-item {
        vertical-align: bottom;
    }
}
```

### scroll-view

#### 横向

```scss
scroll-view {
    &.a-scroll-view {
        &.horizontal {
            white-space: nowrap;
            a-scroll-item {
                display: inline-block;
            }
        }
    }
}
```

```xml
<scroll-view class="a-scroll-view horizontal" scroll-x>
    <a-scroll-item style="width: 70vw; height: 190px;">1</a-scroll-item>
    <a-scroll-item style="width: 70vw; height: 190px;">2</a-scroll-item>
    <a-scroll-item style="width: 70vw; height: 190px;">3</a-scroll-item>
    <a-scroll-item style="width: 70vw; height: 190px;">4</a-scroll-item>
</scroll-view>
```

### a-grid

```scss
$a-grid-gutter: 10;
a-grid {
    @extend .u-layout-flex.horizontal;
    @extend .u-layout-flex.wrap;
}
a-grid.a-grid-row-item-4 {
    $guttersAlllength: $a-grid-gutter * 3;
    > a-grid-item {
        width: calc(24.9% - #{($guttersAlllength / 4)}ppx);
    }
}
```

### flex 
```scss
a-flexrow {
    @extend .u-layout-flex.horizontal;
}

a-flexrow-center {
    @extend .u-layout-flex.horizontal;
    @extend .u-layout-flex.center;
}

a-flexcloumn-center {
    @extend .u-layout-flex.vertical;
    @extend .u-layout-flex.center;
}
```

#### a-flexrow-center 

垂直居中flex row

最常见布局

### a-media

```scss
a-media-inner {
    display: flex;
    align-items: flex-start;
}

.a-media-avatar {
    display: flex;
    width: 90ppx;
    height: 99ppx;
}

a-media {
    a-media-aside + a-media-content {
        padding-left: 10ppx;
    }
    a-media-title + a-media-body {
        margin-bottom: 10ppx;
    }
}
```

## 基础小组件

### a-text-icon

### a-badge

## snippets

### ele:iconwithtext

快速初始化左边icon 右边text的模板

#### phpstorm
```xml
<template is="icon-with-text"
          data="{{comclassname: '$name$', iconname: '$iconname$', icontext: '$text$'}}" ></template>
```
#### xcx:foreach

小程序wx:for

#### phpstorm
```xml
<block wx:for="{{$items$}}" wx:for-item="item">
```

### log
console.log

#### phpstorm
```
console.log($1$);
```

### log:e
console.log(e)

主要看事件是否监听到

#### phpstorm
```
console.log(e);
```